<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>企业环保</el-breadcrumb-item>
            <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">供应商列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div class="inside-main-box">
          <el-row class="inside-main" style="background: #fff; padding-top: 10px; height: 46px">
            <el-col :span="8" style="margin-left: 20px;">
              <el-form-item label="供应商名称" size="small">
                <el-input v-model="form.supplier_name" placeholder="请输入供应商名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="供应商分类" size="small" style="margin-left: 5px;">
                <el-input v-model="form.supplier_classification" placeholder="请输入供应商分类"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
               <el-button size="small" class="empty-but" icon="refresh" @click="onReset()">重置</el-button>
              <el-button size="small" icon="plus" class="add-but" @click="addDialog = true;">新增</el-button>
              <!-- <el-button size="small" :icon="Plus" class="add-but" @click="centerDialogVisible = true">新增</el-button> -->
            </el-col>
          </el-row>
        </div>
        <div style="background: #fff">
          <el-table :data="tableData" style="width: 100vw">
            <el-table-column align="center" prop="id" label="序号" width="80" />
            <el-table-column align="center" prop="supplier_name" width="160px" label="供应商名称" />
            <el-table-column align="center" prop="supplier_classification" width="200px" label="供应商分类" />
            <el-table-column align="center" prop="legal_person" label="法人" />
            <el-table-column align="center" prop="business_license" label="营业执照">
            <template #default="scope">
                <el-button v-if="scope.row.business_license==''||scope.row.business_license==null" type="primary" size="small" link >未上传
               </el-button>
                <el-button v-else type="primary" size="small" link @click="drivingLicenselist(scope.row)">查看照片
               </el-button>
            </template>
            </el-table-column>
            <el-table-column align="center" prop="business_counterpart" label="商务对接人" />
            <el-table-column align="center" prop="counterpart_call" label="对接人电话" />
            <el-table-column align="center" prop="contract" label="合同" />
            <el-table-column align="center" prop="service_category" label="服务类别" />
            <el-table-column align="center" prop="service_items" label="服务项" />
            <el-table-column align="center" prop="environment_protection_manager" width="160px" label="环保负责人+信息" />
            <el-table-column align="center" prop="installer" width="140px" label="安装人员+信息" />
            <el-table-column align="center" prop="operator" width="140px" label="运维人员+信息" />
            <el-table-column align="center" prop="supplier_event_record" width="140px" label="供应商时间记录" />
            <el-table-column align="center" fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button link type="primary" size="small"  icon="edit" @click="updateDetail(scope.row)">修改</el-button>
                <el-button link type="danger" size="small" icon="delete" @click="deleteRow(scope.row.id)">删除</el-button>
              </template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20%; display: flex; justify-content: flex-end" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" title="新增供应商列表" width="40%">
    <div style="width: 80%">
     <el-form style="width:80%" label-width="120px">
           <el-form-item label="供应商名称" prop="supplier_name">
        <el-input v-model="formData.supplier_name" style="width:300px" placeholder="请输入供应商名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商分类" prop="supplier_classification">
           <el-cascader  v-model="ruleForm.parent_id" style="color:black;width:300px" :options="tableDataList.rows" placeholder="不选是根目录"
                         :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
           </el-cascader>
      </el-form-item>
      <el-form-item label="法人" prop="legal_person">
             <el-input v-model="formData.legal_person" style="width:300px" placeholder="请输入法人"></el-input>
      </el-form-item>
            <el-form-item label="营业执照" prop="business_license">
         <el-upload
      v-model="formData.business_license"
      class="avatar-uploader"
      :file-list="state.fileList"
      action='#'
      :http-request="upload"
      :limit="1"
      list-type="picture-card"
      accept="image/png,image/jpg,image/jpeg"
      :on-remove="handleRemove"
       :on-preview="handlePictureCardPreview"
       :class="{hide:showUpload}"
  >
                <el-icon class="avatar-uploader-icon">
      <Plus />
    </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商务对接人" prop="business_counterpart">
             <el-input v-model="formData.business_counterpart" style="width:300px" placeholder="请输入商务对接人"></el-input>
      </el-form-item>
      <el-form-item label="对接人电话" prop="counterpart_call">
             <el-input v-model="formData.counterpart_call" style="width:300px" placeholder="请输入对接人电话"></el-input>
      </el-form-item>
            <el-form-item label="服务类别" prop="service_category">
                <el-input v-model="formData.service_category" maxlength="500" placeholder="请输入服务类别" show-word-limit type="textarea" />
      </el-form-item>
</el-form>
</div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="insert">
            确定
          </el-button>
          <el-button class="empty-but" @click="addDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog v-model="updateDialog" title="新增供应商列表" width="40%">
    <div style="width: 80%">
     <el-form style="width:80%" label-width="120px">
           <el-form-item label="供应商名称" prop="supplier_name">
        <el-input v-model="obj.supplier_name" style="width:300px" placeholder="请输入供应商名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商分类" prop="supplier_classification">
           <el-cascader  v-model="ruleForm.parent_id" style="color:black;width:300px" :options="tableDataList.rows" placeholder="请重新选择"
                         :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
           </el-cascader>
      </el-form-item>
      <el-form-item label="法人" prop="legal_person">
             <el-input v-model="obj.legal_person" style="width:300px" placeholder="请输入法人"></el-input>
      </el-form-item>
            <el-form-item label="营业执照" prop="business_license">
         <el-upload

      class="avatar-uploader"
      :file-list="stateUpdate.fileList"
      action='#'
      :http-request="uploadUpdate"
      :limit="1"
      list-type="picture-card"
      accept="image/png,image/jpg,image/jpeg"
      :on-remove="updateRemove"
       :on-preview="updateHandle"
       :class="{hide:showUploadUpdate}"
  >
                <el-icon class="avatar-uploader-icon">
      <Plus />
    </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商务对接人" prop="business_counterpart">
             <el-input v-model="obj.business_counterpart" style="width:300px" placeholder="请输入商务对接人"></el-input>
      </el-form-item>
      <el-form-item label="对接人电话" prop="counterpart_call">
             <el-input v-model="obj.counterpart_call" style="width:300px" placeholder="请输入对接人电话"></el-input>
      </el-form-item>
            <el-form-item label="服务类别" prop="service_category">
                <el-input v-model="obj.service_category" maxlength="500" placeholder="请输入服务类别" show-word-limit type="textarea" />
      </el-form-item>
</el-form>
</div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="update(obj)">
            确定
          </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
      <!--列表页查看图片-->
<el-dialog v-model="drivingLicenseDia"  align="center">
           <img  class="photoImg"  :src='Image.business_license' alt="" />
        </el-dialog>
<!--新增查看图片 -->
      <el-dialog v-model="dialogBusinessLicense" align="center">
        <el-image :src="formData.business_license" />
          </el-dialog>
          <!--修改查看图片-->
      <el-dialog v-model="updateDialogBusinessLicense" align="center">
        <el-image :src="obj.business_license" />
          </el-dialog>
</div>
</template>

<script setup>
import {
  onMounted,
  reactive,
  ref
} from "vue";
    import {
        Plus
    } from "@element-plus/icons-vue";
    // 路由
    import {
        useRouter
    } from "vue-router";
import {
  FormInstance,
  FormRules,
  ElMessageBox, ElMessage, ElLoading
} from "element-plus";
import {
  selectAllSupplierList,
  insertSupplierList,
  updateSupplierList,
  deleteSupplierList,
  selectAllSupplierClass,
  uploadSupplierList
} from "@/api/entPersonManage";
import {handleTree} from "@/utils/tools";
    onMounted(()=>{
      selectAll()
    })
    const router = useRouter();
    //查询所有
    const selectAll = () => {
      selectAllSupplierList({}).then((res)=>{
        if(res.code == 200){
          tableData.value = res.data
        }
        select()
      })
    }
// 重置
const onReset = () => {
  form.supplier_name = "";
  form.supplier_classification = "";
  selectAll()
};
const tableDataList = reactive({
  row:[],
  flat:{},
  isExpandAll:false,
  refreshTable:true,
});
const tableData = ref([])
const form = reactive({
  supplier_name: "",
  supplier_classification:""
});
let formData = reactive({
  business_license:"",
});
const ruleForm = reactive({
  classification_name: "",
  parent_id: 0,
  supplier_classification: "-",
  description: "",
});
    // 新增弹窗
const addDialog = ref(false);
const parenchange = (e) =>{
  ruleForm.supplier_classification =tableDataList.flat[e]?.classification_name||"-";
  ruleForm.depth = tableDataList.flat[e]?.depth+1||1;
}
const changeModify = (e) =>{
  obj.supplier_classification =tableDataList.flat[e]?.classification_name||"-";
  obj.depth = tableDataList.flat[e]?.depth+1||1;
}
const defaultProps = {
  label:"classification_name",
  value:"id",
  children:"children",
  multiple:false,
  checkStrictly:true,
  emitPath: false
}
//文件分类查询接口
const select = () => {
  selectAllSupplierClass({}).then((res)=>{
    res.data.forEach(e=>{
      tableDataList.flat[e.id] =e;
    })
    tableDataList.rows = handleTree(res.data,'id','parent_id','children')
  })
}
//新增
const insert = () => {
  formData.supplier_classification = ruleForm.supplier_classification
  insertSupplierList(formData).then((res)=>{
    if (res.code === 200) {
      ElMessage.success("新增成功");
      selectAll();
      addDialog.value = false;
    } else {
      ElMessage.error("新增失败");
    }
  })
}
//根据条件查询
const selectQuery = () => {
  selectAllSupplierList(form).then((res)=>{
    if(res.code == 200){
      tableData.value = res.data
    }
    select()
  })
}
//删除
const deleteRow = (index) => {
  ElMessageBox.confirm("确定要删除吗?").then(()=>{
    deleteSupplierList({id:index}).then((res)=>{
      selectAll()
    })
  })
}
//文件上传
const state = reactive({
  fileList: [],
})
const showUpload = ref(false)
const dialogBusinessLicense = ref(false)
const handleRemove= (uploadFile, uploadFiles) => {
  formData.business_license = null
  showUpload.value = false
}
const handlePictureCardPreview = (uploadFile) => {
  formData.business_license = uploadFile.url
  dialogBusinessLicense.value = true
}

const upload = (option) =>{
    let param = new FormData();
    param.append('businessLicense', option.file);
  uploadSupplierList(param).then((res) => {
      if (res.msg === '文件上传成功') {
        formData.business_license= res.businessLicense
        showUpload.value = true
        showUploadUpdate.value = true
        console.log(showUpload.value,'showUpload.value')
        // state.fileList = []
        ElMessage.success('上传成功！');
      }else {
        ElMessage.error('上传失败,请重试');
      }
    })
  }
//  列表查看图片弹窗
const Image = reactive({
  business_license:""
})
const drivingLicenseDia = ref(false)
const drivingLicenselist = (row) => {
  drivingLicenseDia.value = true;
  Image.business_license = row.business_license
};
//修改
const updateDialog = ref(false)
const showUploadUpdate = ref(true)
const updateDialogBusinessLicense = ref(false)
const obj= reactive({
  supplier_name:"",
  supplier_classification:"",
  legal_person:"",
  business_license:"",
  business_counterpart:"",
  counterpart_call:"",
  service_category:"",
})
let list = obj.business_license
const stateUpdate = reactive({
fileList:[]
})
const updateDetail = (row) => {
  updateDialog.value = true
  obj.id = row.id
  obj.supplier_name = row.supplier_name
  obj.legal_person = row.legal_person
  obj.supplier_classification = row.supplier_classification
  obj.business_license = row.business_license
  stateUpdate.fileList=[{url:row.business_license}]
  obj.business_counterpart = row.business_counterpart
  obj.counterpart_call = row.counterpart_call
  obj.service_category = row.service_category
}
const updateRemove= (uploadFile, uploadFiles) => {
  obj.business_license = null
  showUploadUpdate.value = false
}
const updateHandle = (uploadFile) => {
  obj.business_license = uploadFile.url
  updateDialogBusinessLicense.value = true
}
const uploadUpdate = (option) =>{
  let param = new FormData();
  param.append('businessLicense', option.file);
  uploadSupplierList(param).then((res) => {
    if (res.msg === '文件上传成功') {
      obj.business_license= res.businessLicense
      showUploadUpdate.value = true
      ElMessage.success('上传成功！');
    }else {
      ElMessage.error('上传失败,请重试');
    }
  })
}
const update = (row) => {
  updateSupplierList(row).then((res)=>{
    if (res.code == 200){
      ElMessage.success("修改成功")
      updateDialog.value = false
      selectAll()
    }else {
      ElMessage.error("修改失败")
    }

  })
}
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    /*超出限制 隐藏图片上传*/
    ::v-deep.hide .el-upload--picture-card {
      display: none;
    }
</style>
